<template>
  <div class="container">
        <div class="recordHead">
            <div class="changeTime"><slot name="searchForm"/></div>
            <slot name="searchBtn"/>
        </div>
        <div class="center">
            <div class="goods"><slot name="mainBtn"/></div>
            <slot/>
        </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.container{
    padding: 20px;

    .center {
        margin-top: 30px;
        .goods {
            display: flex;
            margin-bottom: 10px;
            .el-button {
                margin-right: 50px;
                width: 120px;
            }
            .goodUl {
                display: flex;
                list-style: none;
                padding: 0;
                margin: 0;
                cursor: pointer;
                li {
                    width: 120px;
                    height: 40px;
                    line-height: 40px;
                    border: 1px solid #eee;
                    text-align: center;
                    font-size: 15px;
                    border-radius: 4px;
                    margin-right: 20px;
                }
            }
        }
    }
    .recordHead {
        .changeTime {
            display: flex;
            margin-bottom: 20px;
            flex-wrap: wrap;
            .timeNext {
                display: flex;
            }
        }
        .changeName {
            width: 188px;
        }
        p {
            line-height: 36px;
            padding-right: 20px;
            font-size: 14px;
            margin: 0;
        }
        .rechangeMan {
            padding-left: 20px;
        }
        .recordBtn {
            width: 120px;
            height: 39px;
            margin-right: 40px;
        }
    }
}
</style>